<script setup>
import { inject, onMounted, reactive } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

import boundaryjson from '@/assets/boundary.json'
import geojson from '@/assets/geo.json'

const $axios = inject('$axios')

window._AMapSecurityConfig = {
  securityJsCode: 'ba27be2ac16aa496722783fbfb2020bf',
}

onMounted(() => {
  if (window.AMap == undefined) {
    AMapLoader.load({
      //首次调用 load
      key: '3f7aa1ed270ffb4d10cf26afb0f9c1e7', //首次load key为必填
      plugins: ['Map3D', 'AMap.MarkerClusterer', 'AMap.MouseTool', 'AMap.DistrictSearch'],
      AMapUI: {
        plugins: ['overlay/SimpleMarker'],
      },
    }).then(AMap => {
      initAMap()
    })
  } else {
    initAMap()
  }
})

function initAMap() {
  // var result = JSON.parse("{\"datas\":\"" + JSON.stringify(boundaryjson) + "\"}");
  // console.log(result)

  let bounds = boundaryjson
  const map = new AMap.Map('container', {
    viewMode: '3D',
    pitch: 30,
    zoom: 10,
    mask: bounds,
    // resizeEnable: false,
    // showIndoorMap:false,
    // zoomEnable: false,
    // dragEnable:false,
    // features: ['bg', 'road', 'building', 'point'],
    features: ['bg'],
    mapStyle: 'amap://styles/4f17053a1f97e019c4c51d002ac206fd',
    center: [114.529709, 33.768277],
    // center: [115.051683,32.131426]
  })
  //设置光照
  //   map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
  // map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);

  var object3Dlayer = new AMap.Object3DLayer()
  map.add(object3Dlayer)

  var wall = new AMap.Object3D.Wall({
    path: bounds,
    height: 10000,
    color: '#0c3b64',
  })
  wall.backOrFront = 'both'
  wall.transparent = true
  object3Dlayer.add(wall)

  var gjson = new AMap.GeoJSON({
    geoJSON: geojson,
    // 还可以自定义getMarker和getPolyline
    getPolygon: function (gjson, lnglats) {
      // 计算面积
      var area = AMap.GeometryUtil.ringArea(lnglats[0])

      return new AMap.Polygon({
        path: lnglats,
        strokeColor: '#2cb1e9',
        strokeWeight: 1,
        // strokeOpacity: 1,
        // fillOpacity: 1,
        fillColor: '#0f2943',
      })
    },
  })
  map.add(gjson)

  /*
    new AMap.DistrictSearch({
        subdistrict: 0,   //返回下一级行政区
        extensions: 'all',  //返回行政区边界坐标组等具体信息
        level: 'city'  //查询行政级别为 市
    }).search('西华县', function (status, result) {

        var bounds = result.districtList[0].boundaries;

        // for(let i = 0; i < bounds.length; i++){
        //     mask.push([bounds[i]])
        // }
        const map = new AMap.Map('container', {
            viewMode: '3D',
            pitch: 30,
            zoom: 10,
            mask:bounds,
            // resizeEnable: false,
            // showIndoorMap:false,
            // zoomEnable: false,
            // dragEnable:false,
            // features: ['bg', 'road', 'building', 'point'],
            features: ['bg'],
            mapStyle:"amap://styles/4f17053a1f97e019c4c51d002ac206fd",
            center: [114.529709,33.768277]
            // center: [115.051683,32.131426]
        });

          //设置光照
        //   map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
        // map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);

        var object3Dlayer = new AMap.Object3DLayer();
        map.add(object3Dlayer);

        var wall = new AMap.Object3D.Wall({
            path: bounds,
            height: 10000,
            color: '#0c3b64'
        });
        wall.backOrFront = 'both';
        // wall.transparent = true;
        object3Dlayer.add(wall);

        var geojson = new AMap.GeoJSON({
                geoJSON: gjson,
                // 还可以自定义getMarker和getPolyline
                getPolygon: function(geojson, lnglats) {
                    // 计算面积
                    var area = AMap.GeometryUtil.ringArea(lnglats[0])

                    return new AMap.Polygon({
                        path: lnglats,
                        strokeColor: '#2cb1e9',
                        strokeWeight: 1,
                        // strokeOpacity: 1,
                        // fillOpacity: 1,
                        fillColor: '#0f2943'
                    });
                }
        });
        map.add(geojson);
        });

    new AMap.DistrictSearch({
        subdistrict: 0,   //返回下一级行政区
        extensions: 'all',  //返回行政区边界坐标组等具体信息
        level: 'city'  //查询行政级别为 市
    }).search('西华县', function (status, result) {
        var bounds = result.districtList[0].boundaries;
        var height = 5000;
        var color = '#0088ffcc'; // rgba
        var prism = new AMap.Object3D.Prism({
            path: bounds,
            height: height,
            color: color
        });

        prism.transparent = true;
        object3Dlayer.add(prism);

        var text = new AMap.Text({
            text: result.districtList[0].name + '</br>(' + result.districtList[0].adcode + ')',
            verticalAlign: 'bottom',
            position: [114.530067,33.784378],
            height: 5000,
            style: {
                'background-color': 'transparent',
                '-webkit-text-stroke': 'red',
                '-webkit-text-stroke-width': '0.5px',
                'text-align': 'center',
                'border': 'none',
                'color': 'white',
                'font-size': '24px',
                'font-weight': 600
            }
        });

        // text.setMap(map);
    }); 
     */
}

const data = reactive({
  map: {},
})
</script>

<template>
  <div id="container"></div>
</template>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>
